<template>
	<div class="md-comments">
		<div class="message-box">
			<ul>
				<li>121</li>
			</ul>
			<ul>
				<li>2112</li>
			</ul>
		</div>
		<v-navigation-drawer clipped right absolute>
			<v-list>
				<v-list-item v-for="n in 5" :key="n" link>
					<v-list-item-content>
						<v-list-item-title>Item {{ n }}</v-list-item-title>
					</v-list-item-content>
				</v-list-item>
			</v-list>
		</v-navigation-drawer>

		<v-footer app color="transparent" height="72" inset>
			<v-text-field v-model="message" dense flat hide-details rounded solo @keydown.enter="onEnter"/>
			<v-btn icon color="primary" class="ml-2" @click="onEnter">
				<v-icon>fa-reply</v-icon>
			</v-btn>
		</v-footer>
	</div>
</template>

<script>
export default {
	name: 'Comments',
	data() {
		return {
			message: undefined
		}
	},
	methods: {
		onEnter() {
			console.info(this.message)
			this.message = undefined;
		}
	}
}
</script>

<style scoped lang="scss">
.md-comments {
	height: 100%;
	position: relative;

	.v-navigation-drawer {
		top: -12px !important;
		bottom: -20px;
		height: auto !important;
		z-index: 2;
	}
}
</style>